<template>
	<div>
		<div class="banner">
			<img class="banner-img" :src="imgList[0]" alt="">
			<div class="container">
				<div class="left">{{sightName}}</div>
				<div class="right">
					<i class="iconfont icontupian"></i>
					<span>{{imgList.length}}</span>
				</div>
			</div>
			<div class="gradient" @click="showGallary=true"></div>
		</div>
		<detail-gallary :imgs="imgList" v-show="showGallary" @close="handleGallary"></detail-gallary>
	</div>
</template>

<script>
	import Gallary from '../subcomponents/Gallary/Gallary.vue'
	export default{
		props:{
			sightName:String,
			imgList:Array
		},
		components:{
			detailGallary:Gallary
		},
		data(){
			return{
				showGallary:false
			}
		},
		methods:{
			handleGallary(){
				this.showGallary=false
			}
		},
		mounted(){
			console.log(this.imgList)
		}
	}
</script>

<style lang="stylus" scoped>
	.banner
		position relative
		overflow hidden
		height 0
		padding-bottom 55%
		.banner-img
			width 100%
		.container
			position absolute
			left: .2rem;
			right .4rem
			bottom: .2rem;
			display flex
			justify-content space-between
			.left
				line-height: .4rem;
				color: #fff;
				font-size: .36rem;
				text-shadow: 0 1px 2px rgba(0,0,0,0.70);
			.right
				line-height .4rem
				i,span
					vertical-align  middle
					color #fff
		.gradient
			z-index 1
			position absolute
			top 0
			left 0
			right 0
			bottom 0
			//增加一个渐变的模板
			background linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.4))
</style>
